/*
*getElementsClass(class):根据元素的class获取元素数组
*AutoComplete(ele,data,option,fun):
*ele:需要有下框的元素（必填）
*data:数据数组（必填）
*option:数据字段名（必填）
*fun:回调函数（选填）
**/

function getElementsClass(classnames){
    var classobj= new Array();
    var classint=0;
    var tags=document.getElementsByTagName("*");
    for(var i = 0;i<tags.length;i++ ){
       if(tags[i].nodeType==1){
            if(tags[i].getAttribute("class") == classnames){
                classobj[classint]=tags[i];
                classint++;
            }
        }
    }
    return classobj;
}

　　function getElementViewLeft(element){
　　　　var actualLeft = element.offsetLeft;
　　　　var current = element.offsetParent;
　　　　while (current !== null){
　　　　　　actualLeft += current.offsetLeft;
　　　　　　current = current.offsetParent;
　　　　}
　　　　if (document.compatMode == "BackCompat"){
　　　　　　var elementScrollLeft=document.body.scrollLeft;
　　　　} else {
　　　　　　var elementScrollLeft=document.documentElement.scrollLeft; 
　　　　}
　　　　return actualLeft-elementScrollLeft;
　　}
　　function getElementViewTop(element){
　　　　var actualTop = element.offsetTop;
　　　　var current = element.offsetParent;
　　　　while (current !== null){
　　　　　　actualTop += current. offsetTop;
　　　　　　current = current.offsetParent;
　　　　}
　　　　 if (document.compatMode == "BackCompat"){
　　　　　　var elementScrollTop=document.body.scrollTop;
　　　　} else {
　　　　　　var elementScrollTop=document.documentElement.scrollTop; 
　　　　}
　　　　return actualTop-elementScrollTop;
　　}


	function AutoComplete (ele,data,option,fun) {
//		ele.removeEventListener('keyup',keyup,false);
//	    ele.removeEventListener('focus',focus,false);
//	    ele.removeEventListener('blur',blur,false);
//	    ele.removeEventListener('input',change,false);
		
	    var item_click = fun ? fun : function(){
	        // console.log(this);
	    };
	
	    var arr = [],option = option?option:[];//显示数据
	
	    var mouseon = '0';
	    //显示框
//	    var div = document.createElement("div");
	//  div.setAttribute('class','datalist_div');
		var div = document.getElementById("datalist");
//		div.innerHTML = "";
	
	    div.addEventListener('mouseover',function(){
	        mouseon = '1';
	    });
	
	    div.addEventListener('mouseout',function(){
	        mouseon = '0';
	    });
	    ele.addEventListener('mouseover',function(){
	        mouseon = '1';
	    });
	
	    ele.addEventListener('mouseout',function(){
	        mouseon = '0';
	    });
//	    document.body.appendChild(div);
	    div.setAttribute('style','background-color: #ffffff;border: 1px solid rgb(160, 160, 160);width: 170px;overflow: auto;position: absolute;max-height: 300px;display: none;z-index:10000;');
	
	    //输入
	    function keyup(event){
//	    	console.log("keyup",mouseon);

	        //输入框是否选中
	        var arr = [];
	        ele.setAttribute('selected','false');
			dusearch();
			item_click('keyup',ele.value);
//	    	console.log(div.style.display);
//      	console.log(div.children);
	    }
	
	    //焦点
	    function focus(event){
//	    	console.log("focus",mouseon);

	        div_size();
	        if(ele.value.length>0){ele.select();}
	        //输入框是否选中
	        ele.setAttribute('selected','true');
	        dusearch();
	        
	        item_click('focus',ele.value);
//	    	console.log(div.style.display);
//      	console.log(div.children);
	    }
	
	    //失去焦点
	    function blur(event){
//	        console.log("blur",mouseon);

	        ele.setAttribute('selected','false');
	        if(mouseon == '0'){
	        	div.style.display = "none";
	        }
	        item_click('blur',ele.value);
//	    	console.log(div.style.display);
//      	console.log(div.children);
	    }
	    
	    //input值改变
	    function input(){
//	    	console.log("input",mouseon);

	    	ele.setAttribute('selected','false');
	        dusearch();
	        item_click('input',ele.value);
//	    	console.log(div.style.display);
//      	console.log(div.children);
	    }
	
		//设置input值
	    function setvalue(value){
//	    	console.log("setvalue",mouseon);

	        ele.value = value[option[0]];
	    	div.style.display = "none";
	        item_click('setvalue',value);
//	    	console.log(div.style.display);
//      	console.log(div.children);
	    }
	
	
//	    ele.addEventListener('keyup',keyup,false);
//	    ele.addEventListener('focus',focus,false);
//	    ele.addEventListener('blur',blur,false);
//	    ele.addEventListener('input',input,false);

		ele.onkeyup = keyup;
		ele.onfocus = focus;
		ele.onblur = blur;
		ele.oninput = input;

	    var div_size = function(){
	        //初始化DIV的位置
	        div.style.left = getElementViewLeft(ele) + "px";
	        div.style.top = getElementViewTop(ele) + ele.offsetHeight + "px";
	        div.style.width = ele.offsetWidth + "px";//减去边框的长度2px
	    }
	    div_size();
	
	
	    function dusearch(){
//	    	console.log(data);
	        arr = [];div.innerHTML = "";
	        if(ele.value&&String(ele.value).length>0){
	            for(let i=0;i<data.length;i++){
	                if(String(data[i][option[0]]).indexOf(String(ele.value))!=-1||String(data[i][option[1]]).indexOf(String(ele.value))!=-1){
	                    arr.push(data[i]);
	                }
	            }
	        }else{
	            for(let i=0;i<data.length;i++){
	                arr.push(data[i]);
	            }
	        }
	        if(ele.getAttribute('selected')=='true'){
	            arr = [];
	            for(let i=0;i<data.length;i++){
	                arr.push(data[i]);
	            }
	        }

	        for(let i = 0;i<arr.length;i++){
	            var item_div = document.createElement("div");
	
	            div.appendChild(item_div);
	
	            item_div.setAttribute('id',i);
	            item_div.setAttribute('style','padding:2px;font-size:14px;height:25px;');
	
	            var div1 = document.createElement("div");
	            div1.setAttribute('style','margin-top:3px;cursor:default;text-align:left;width:50%;display:inline-block;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;');
	            div1.innerHTML = arr[i][option[0]];
	            item_div.appendChild(div1);
	            
	            if(option[1]){
		            var div2 = document.createElement("div");
		            div2.setAttribute('style','margin-top:3px;cursor:default;text-align:right;width:50%;display:inline-block;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;');
		            div2.innerHTML = arr[i][option[1]];
		            item_div.appendChild(div2);
	            }
	
	            item_div.onmouseover=function(){
	                this.setAttribute('style','padding:2px;font-size:14px;height:25px;background-color:#a8d1f7;');
	            };
	
	            item_div.onmouseout=function(){
	                this.setAttribute('style','padding:2px;font-size:14px;height:25px;');
	            };
	
	            item_div.onclick=function(){
	                setvalue(arr[i]);
	            };
	        }
	        div.style.display = "block";
	    };
		
		//闭包监听窗口大小变化
	    (function(){
	        window.onresize = function(){
		        //初始化DIV的位置
		        div.style.left = getElementViewLeft(ele) + "px";
		        div.style.top = getElementViewTop(ele) + ele.offsetHeight + "px";
		        div.style.width = ele.offsetWidth + "px";//减去边框的长度2px
	        }
	    })(div,ele);
	}

